import React, { useState, useEffect } from 'react';
import '../styles/home.css';
import getOption from './echarts/bar';
import getCircleOption from './echarts/circle';
import ReactEcharts from 'echarts-for-react';
import { getClasses } from './utils';
import { Avatar, List } from 'antd';
const circleOption = getCircleOption();

export default function home() {
  const [option, setOption] = useState(getOption());
  //获取班次信息
  const [id] = useState(
    localStorage.getItem('userId') || '666cf26459e6af82d95551d1',
  );
  const [data, setData] = useState([]);
  useEffect(() => {
    const getData = async () => {
      const data = await getClasses(id);
      setData(data);
      handleData(data);
      handleListData(data);
    };
    getData();
  }, [id]);

  useEffect(() => {
    handleData(data);
  }, [data]);

  const handleData = (data: any) => {
    const months = data.map((item: any) => item.month);
    const count = months.reduce(
      (acc: { [x: string]: any }, curr: string | number) => {
        return { ...acc, [curr]: (acc[curr] || 0) + 1 };
      },
      {},
    );
    const list = Object.values(count);
    option.series?.map((item: any) => {
      item.data = list;
    });
    setOption(option);
  };
  //处理列表数据
  const [listData, setListData] = useState([
    {
      title: '本月总班数',
    },
    {
      title: '本月值班数',
    },
    {
      title: '本月请假数',
    },
    {
      title: '剩余班次数',
    },
  ]);
  const handleListData = (data: any) => {
    //获取当前月份
    const now = new Date();
    const month = now.getMonth() + 1;

    const newListData = [...listData];
    //本月总班数
    const total = data.filter((item: any) => {
      return item.month === month;
    });
    newListData[0].count = total.length;
    //本月值班数
    const duty = total.filter((item: any) => {
      return item.isAbsent === false;
    });
    newListData[1].count = duty.length;
    //本月请假数
    const leave = data.filter((item: any) => {
      return item.isLeave === true;
    });
    newListData[2].count = leave.length;
    //剩余班次数
    const rest = total.length - duty.length;
    newListData[3].count = rest;
    setListData(newListData);
  };
  return (
    <div className="home-container">
      <div className="home-header">
        <div className="home-header-left">
          <h3 style={{ position: 'absolute', left: '10px', top: '10px' }}>
            <b>班次统计</b>
          </h3>
          <ReactEcharts option={option} />
        </div>
        <div className="home-header-right" style={{ position: 'relative' }}>
          <h3 style={{ position: 'absolute', left: '10px', top: '10px' }}>
            <b>我的班次</b>
          </h3>
          <List
            itemLayout="horizontal"
            dataSource={listData}
            style={{
              position: 'absolute',
              left: '10px',
              top: '50px',
              width: '100%',
              fontSize: '14px',
              fontWeight: 'bold',
            }}
            size="small"
            renderItem={(item, index) => (
              <List.Item>
                <h3>{item.title}</h3>
                <p style={{ color: 'blue' }}>{item.count}</p>
              </List.Item>
            )}
          />
        </div>
      </div>
      {/* <div className="home-content">
        <div className="home-content-left">
          <ReactEcharts option={circleOption} />
        </div>
        <div className="home-content-right">
          <ReactEcharts option={circleOption} />
        </div>
      </div> */}
    </div>
  );
}
